<template>
  <view class="main">
    <!-- 意见反馈页面 -->
    <view class="xian"></view>
    <view class="yijian">
      <text class="title">问提意见</text>
      <view class="text">
        <textarea
          value=""
          placeholder="请输入您所遇到的问题，我们将会第一时间处理。"
          v-model="content"
        />
      </view>
      <text class="title">联系方式</text>
      <view class="xinxi">
        <view class="name">
          <input type="text" value="" placeholder="姓名" v-model="uName" />
        </view>
        <view class="phone">
          <input type="text" value="" placeholder="联系电话" v-model="phone" />
        </view>
      </view>
      <text class="title">图片 (选填)</text>
      <!-- 发照片 -->
      <view class="upload_img">
        <view class="imgs" v-for="(item, index) in imgs_p" :key="index">
          <image
            :src="item"
            mode="aspectFill"
            class="image"
            @tap="imgsDa(index)"
          ></image>
          <image
            src="../../imges/shanchu1.png"
            mode="aspectFill"
            class="shan"
            @tap="imgsShan(index)"
          ></image>
        </view>
        <view class="img" @tap="selctPhone">
          <image src="../../imges/fazhaopian.png" mode="aspectFill"></image>
          <text>添加照片</text>
        </view>
      </view>
      <view class="tj" @tap="save"> 提交 </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      imgs: [], //照片数组,
      imgs_p: [],
      upToken: "",
      uName: "",
      phone: "",
      qiniuyun: "",
      qiniuUrl: "",
      content: "",
    };
  },
  onLoad() {
    request({
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
      },
      data: {},
    }).then((res) => {
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    selctPhone(e) {
      //点击上传图片
      let that = this;
      uni.chooseImage({
        count: 5,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          this.imgs_p = [...this.imgs_p, ...res.tempFilePaths];
          tempFilePaths.forEach((v, i) => {
            uni.uploadFile({
              url: "https://up-z0.qiniup.com",
              filePath: tempFilePaths[i],
              name: "file",
              formData: {
                token: this.upToken,
              },
              success: (uploadFileRes) => {
                that.imgs.push(
                  that.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key
                );
                uni.showToast({
                  title: "上传成功",
                  duration: 1500,
                  icon: "none",
                });
              },
            });
          });
        },
      });
    },
    imgsDa(index) {
      //点击放大
      uni.previewImage({
        urls: this.imgs_p,
        current: index,
        loop: true,
      });
    },
    imgsShan(index) {
      //点击删除
      uni.showModal({
        title: "提示",
        content: "确定删除此张照片吗？",
        success: (res) => {
          if (res.confirm) {
            this.imgs.splice(index, 1);
            this.imgs_p.splice(index, 1);
            // console.log( this.imgs)
          }
        },
      });
    },
    save() {
      //点击保存
      if (this.content == "") {
        uni.showToast({
          title: "请填写反馈信息",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      if (this.uName == "") {
        uni.showToast({
          title: "请输入姓名",
          duration: 2000,
          icon: "none",
        });
        return false;
      }

      if (this.phone == "") {
        uni.showToast({
          title: "请输入手机号",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let phoneH = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (!phoneH.test(this.phone)) {
        uni.showToast({
          title: "请输入合法手机号",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/comments/save?uid=",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            content: this.content,
            tel: this.phone,
            imgArray: this.imgs,
            sourceType: 2, //反馈平台
            uName: this.uName,
          },
        }).then((res) => {
          console.log(res, "反馈");
          if (res.data.code == 200) {
            uni.showToast({
              title: "反馈成功",
              duration: 1500,
              icon: "none",
            });

            setTimeout((v) => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.xian {
  height: 1rpx;
  background-color: #dddddd;
}
.yijian {
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 32rpx;
    color: #333333;
    padding: 30rpx 0;
    font-weight: bold;
  }
  .text {
    width: 100%;
    height: 243rpx;
    background-color: #f9f9fa;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    color: #999999;
    font-size: 32rpx;
    border: 1px solid #dddddd;
    margin-bottom: 20rpx;
    textarea {
      width: 100%;
      height: 100%;
    }
  }
}
.xinxi {
  width: 100%;
  height: 166rpx;
  background-color: #f9f9fa;
  border-radius: 8rpx;
  border: 1rpx solid #dddddd;
  padding: 0 36rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  .name,
  .phone {
    display: flex;
    height: 83rpx;
    align-items: center;
    font-size: 32rpx;
    color: #333333;
  }
}
.upload_img {
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  .img {
    border: 2rpx solid #eee;
    box-sizing: border-box;
    width: 200rpx;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(249, 249, 250, 1);
    border-radius: 8rpx;
    image {
      height: 65rpx;
      width: 75rpx;
    }
    text {
      font-size: 24rpx;
      color: #999999;
      margin-top: 18rpx;
    }
  }
  .imgs {
    width: 200rpx;
    height: 200rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
    border-radius: 12rpx;
    position: relative;
    .image {
      width: 100%;
      height: 100%;
    }
    .shan {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      height: 30rpx;
      width: 30rpx;
    }
  }
}
.tj {
  width: 100%;
  height: 86rpx;
  background-color: #2168eb;
  text-align: center;
  line-height: 86rpx;
  color: #ffffff;
  border-radius: 43rpx;
  margin-top: 100rpx;
  font-size: 32rpx;
}
</style>
